<template>
    <!-- 编辑弹窗 -->
    <!-- 弹出添加学员信息 -->
    <div class="add-stu">
      <el-dialog @close="dialogClose" :title="title" :visible="visible">

        <!-- 姓名、班级、年龄... -->
        <el-form
          label-position="top"
          :model="stuForm"
          :rules="stuRules"
          ref="stuDialogRuleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
        <!-- 头像部分 -->
        
        <el-form-item label="头像" class="headerImg">
            <el-upload
                class="uploadAvatar" 
                ref="uploadAvatar"
                action="/api/students/uploadStuAvatar"
                list-type="picture-card"
                :on-success="uploadSuccess"
                :on-remove="RemoveAvatar"
                :limit="1"
                name="headimgurl" 
                :multiple="false">
                <i class="el-icon-plus"></i>
                </el-upload>
                
        </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="stuForm.name"></el-input>
          </el-form-item>
          <el-form-item label="项目地址" prop="productUrl">
            <el-input v-model="stuForm.productUrl"></el-input>
          </el-form-item>
          <el-form-item label="班级" prop="class">
            <el-input v-model="stuForm.class"></el-input>
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input v-model="stuForm.age"></el-input>
          </el-form-item>
          <el-form-item label="城市" prop="city">
            <el-input v-model="stuForm.city"></el-input>
          </el-form-item>
          <el-form-item label="学历" prop="degree">
            <el-input v-model="stuForm.degree"></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <el-input v-model="stuForm.description"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="$emit('cancel')">取 消</el-button>
          <el-button type="primary" @click="confirm('stuDialogRuleForm')">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>



<script>
    // import { mapState } from "vuex"
    export default{
        computed: {
            // ...mapState('users',['currentRow'])  
        },
        props: {
            visible:{
                required:true,
                type:Boolean,
                default(){
                    return false 
                }
            },
            // title:{
            //     required:true,
            // }
        },
        data(){
            return{
                title:"",
                showAvatar: true,
                dialogInfo:{
                    action: "add",//操作是增加还是编辑
                },
                showAvatar:true,
                dialogFormVisible: false,
                stuForm: {
                    name: "",
                    productUrl: "",
                    class: "",
                    age: "",
                    city: "",
                    degree: "",
                    description: "",
                    headimgurl:"",//头像
                },
                 //表单验证规则
                stuRules: {
                    name: [
                    { required: true, message: "请输入名字", trigger: "blur" },
                    { min: 3, max: 5, message: "长度在 2 到 4 个字符", trigger: "blur" },
                    ],
                    productUrl: [
                    { required: true,
                      message: "请输入项目地址", 
                      trigger: "blur" },
                    ],
                    class: [
                    {
                        // type: "date",
                        required: true,
                        message: "请输入班级",
                        trigger: "blur",
                    },
                    ],
                    age: [
                    {
                        // type: "date",
                        required: true,
                        message: "请输入年龄",
                        trigger: "blur",
                    },
                    ],
                    city: [
                    {
                        required: true,
                        message: "请输入城市",
                        trigger: "blur",
                    },
                    ],
                    degree: [
                    {
                        required: true,
                        message: "请输入学历",
                        trigger: "blur",
                    },
                    ],
                    description: [
                    {
                        required: true,
                        message: "请输入描述",
                        trigger: "blur",
                    },
                    ],
                },
            }
        },
        methods: {
            // 上传头像的方法
            uploadSuccess(r){ //图片上传成功的回调
                console.log(r);
                 //手动给stuForm的headimgurl赋值
                 if(r.state){
                    this.stuForm.headimgurl = r.headimgurl
                 }else{
                    this.$message.error(r.msg + "-" + r.err)
                 }
            },
            RemoveAvatar(file) {
            },
            dialogClose(){ //dialog关闭时触发的回调
            //通过父组件传递下来的方法,关闭dialog
                this.$emit('cancel')
            },
            
            //点击确定按钮
            confirm(formName){
                //表单本地校验
                this.$refs[formName].validate(valid => {
                    if(valid){
                        this.$emit('ok',this.stuForm)
                       
                    }
                })
            }
        }
    }
</script>



<style lang="less" scoped>
/deep/ .el-dialog__body {
  height: 836px;
  // width: 584px;
}
.add-stu {
  width: 604px;
  padding: 0 20px;
  .el-input[data-v-2f813fa8] {
    width: 100%;
  }
  .el-form-item{
    margin-bottom: 10px;
    text-align: left;
  }
}
/deep/ .el-upload--picture-card{
    width:100px;
    height: 100px;
    
}
/deep/ .el-upload{
    line-height: 110px;
}
.headerImg{
    display: flex;
}
.uploadAvatar{
    margin-left: 10px;
}
/deep/ .dialog-footerr{
    text-align: right;
} 
</style>